﻿/*
THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
PARTICULAR PURPOSE.

Copyright (c) Microsoft Corporation. All rights reserved
*/

#feed {
    background: #3d3d3d url('../../../images/LargeRSSLogo-background-white.png') bottom left no-repeat !important;
    background-size: cover;
}

/* This selector is used to prevent ui-dark/light.css from overwriting changes
   to .win-surface. */
#feed #articlesListView .win-horizontal.win-viewport .win-surface {
    margin-left: 120px;
    margin-bottom: 60px;
}

/* List View */
#articlesListView {
    position: relative;
    height: 100%;
    width: 100%;
            
}

/* Tiles */
    
    /* Text tile */
    #articlesListView .large-text-tile {
        height: 510px;
        width: 510px;
        display: -ms-grid;
        background-color: #d85137;
        display: block;
        overflow: hidden;
    }
        
        #articlesListView .large-text-tile .title {
            margin: 5px;
            height: 100%;
            font: 34pt/38pt "Segoe UI Semilight";
        }
        
     #articlesListView .normal-text-tile {
        height: 250px;
        width: 250px;
        display: -ms-grid;
        background-color: #d85137;
        display: block;
        overflow: hidden;
    }
        
        #articlesListView .normal-text-tile .title {
            margin: 5px;
            height: 100%;
            font: 16pt/18pt "Segoe UI Semilight";
        }
    
    /* Image tile */
    #articlesListView .large-image-tile {
        height: 510px;
        width: 510px;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr 180px;
         display: -ms-grid;
        background-color: white !important;
    }
    
        #articlesListView .large-image-tile .image {
            -ms-grid-row-span: 2;
            overflow: hidden;
            background-repeat: no-repeat !important;
            background-size: cover !important;
        }

        #articlesListView .large-image-tile .overlay {
            -ms-grid-row: 2;
            background-color: #d85137;
            opacity: 0.9;
            height: 180px;
            display: block;
            overflow: hidden;
        }

        #articlesListView .large-image-tile .overlay .title {
            margin: 5px;
            font: 24pt/26pt "Segoe UI Semilight";
            -ms-hyphens: auto;
        }
         
    #articlesListView .normal-image-tile {
        height: 250px;
        width: 250px;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr 100px;
         display: -ms-grid;
        background-color: white !important;
    }
    
        #articlesListView .normal-image-tile .image {
            -ms-grid-row-span: 2;
            overflow: hidden;
            background-repeat: no-repeat !important;
            background-size: cover !important;
        }

        #articlesListView .normal-image-tile .overlay {
            -ms-grid-row: 2;
            background-color: #d85137;
            opacity: 0.9;
            height: 100px;
            display: block;
            overflow: hidden;
        }

        #articlesListView .normal-image-tile .overlay .title {
            margin: 5px;
            font: 12pt/14pt "Segoe UI Semilight";
            -ms-hyphens: auto;
        }

#errorDiv {
    margin-left: 124px;
    font: 12pt/14pt "Segoe UI Semilight";
}

@media screen and (-ms-high-contrast) {
    #feed #articlesListView .image {
        -ms-high-contrast-adjust: none;
    }
}

@media screen and (max-width: 480px) {
    #feed #articlesListView .win-container {
        margin-left: 10px;
        height: 90px;
        width: calc(100% - 40px);
        overflow: hidden;
    }

    #feed #articlesListView .win-item {
        height: 100%;
        background-color: #d85137;
    }

        #feed #articlesListView .win-item .title {
            margin: 5px;
            font: 11pt/15pt "Segoe UI Semilight";
        }

    #errorDiv {
        margin-left: 10px;
    }
}